<template>
  <div class="main">
    <Header>
      <div slot="left">
        <i class="iconfont icon-fanhui-xianxing"></i>
      </div>
      <div slot="center">
        <p>分类</p>
      </div>
      <div slot="right">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </Header>
    <div class="list">
      <div class="nav-bar">
        <div>
          <ul>
            <li
              v-for="(item, index) in titleList"
              :key="index"
              :class="{ active: index == currentIndex }"
              @click="goClick(index)"
            >
              {{ item }}
            </li>
            <!-- <li v-for="i in 35" :key="i">5</li> -->
          </ul>
        </div>
      </div>
      <div class="item" ref="dataList">
        <div>
          <!-- 一级 -->
          <ul class="r-ul" v-for="(item, i) in dataList" :key="i">
            <!-- 二级 -->
            <li v-for="(option, j) in item" :key="j">
              <h4>{{ option.name }}</h4>
              <ul class="box">
                <!-- 三级 -->
                <li v-for="(val, k) in option.list" :key="k">
                  <img @load="load()" :src="val.imgUrl" alt="" />
                  <span>{{ val.name }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import Scroll from "better-scroll";
import Header from "@/components/common/Header";
import TabBar from "@/components/common/TabBar";

export default {
  name: "List",
  data() {
    return {
      titleList: [],
      dataList: [],
      scroll: null,
      mainScroll: null,
      hightList: [],
      scrollY: 0,
    };
  },
  computed: {
    currentIndex() {
      return this.hightList.findIndex((item, index) => {
        return this.scrollY >= item && this.scrollY < this.hightList[index + 1];
      });
    },
  },
  components: {
    Header,
    TabBar,
  },
  methods: {
    goClick(index) {
      this.scrollY = this.hightList[index];
      this.mainScroll.scrollTo(0, -this.scrollY, 300);
    },
    load() {
      this.mainScroll.refresh();
    },
    getList() {
      this.$http
        .$axios({
          url: "/api/list",
        })
        .then((res) => {
          let data = res.data.data;

          data.forEach((item) => {
            this.titleList.push(item.name);
            this.dataList.push(item.data);
          });

          this.titleList = this.titleList.concat(
            this.titleList,
            this.titleList,
            this.titleList,
            this.titleList,
            this.titleList
          );
          // console.log(this.dataList);
        });
    },
  },
  created() {},
  mounted() {
    this.getList();
    this.$nextTick(() => {
      setTimeout(() => {
        let uls = this.$refs.dataList.getElementsByClassName("r-ul");

        Array.from(uls).forEach((item) => {
          this.hightList.push(item.offsetTop);
        });
        // console.log(this.hightList);
        console.log(this.hightList[1]);
        this.mainScroll.on("scroll", (res) => {
          this.scrollY = Math.abs(res.y);

          // console.log(this.scrollY);
        });
      }, 500);
      this.scroll = new Scroll(".nav-bar", {
        click: true,
      });

      this.mainScroll = new Scroll(".item", {
        click: true,
        probeType: 3,
      });
    });
  },
  updated() {
    this.scroll.refresh();
    // this.mainScroll.refresh();
  },
};
</script>

<style scoped lang='scss'>
.active {
  color: #ff6d07;
}
.list {
  display: flex;
  position: absolute;
  margin-top: 1.173333rem;
  top: 0;
  left: 0;
  right: 0;
  bottom: 1.653333rem;
  overflow: hidden;
}
.item {
  width: 100%;
  padding-bottom: 1.173333rem;
}
.nav-bar {
  width: 2.933333rem;
  ul {
    text-align: center;
    border-right: 1px solid #aaa;
    li {
      font-size: 0.373333rem;
      line-height: 1.013333rem;
      height: 1.013333rem;
    }
  }
}
h3 {
  text-align: center;
}
.box {
  display: flex;
  flex-wrap: wrap;
  li {
    display: flex;
    flex-direction: column;
    width: 33%;
    padding: 0.266667rem;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      font-size: 0.373333rem;
    }
  }
}
</style>